import React, { Component } from 'react'
import Mock from "mockjs"
let data=Mock.mock({
    "list|10":[{
        "title":"@ctitle(3)",
        "id":"@id",
        "child|3-5":[{
            "id":"@id",
            "title":"@ctitle(2,5)",
            img:"@image(100x100,@color)",
            "price|5-30.2":0
        }]
    }]
})
export class Tab extends Component {
    constructor(props){
        super(props)
        this.state={
            tablist:data.list,
            active: 0
        }
    }
  render() {
      const { tablist,active }=this.state
    return (
      <div className='tab'>
          <ul className='left'>
              <li>
                  {tablist.map((item,index)=>{
                      return <li key={item.id} onClick={()=>{
                           this.setState({
                            active:index
                          })
                      }
                      } className={index === active ? 'on' : ''}  > {item.title}</li>
                  })}
              </li>
          </ul>
          <ol className='right'>
              {tablist[active].child.map((item)=>{
                  return <li key={item.id}>
                      <img src={item.img} />
                      {item.price}
                      {item.title}
                  </li>

              })}

          </ol>

      </div>
    )
  }
}

export default Tab